<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>购物车案例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    h2, h3 {
      margin-bottom: 10px;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      padding: 8px;
      border: 1px solid #ccc;
      margin-bottom: 5px;
    }
    input[type="number"] {
      width: 50px;
      margin: 0 5px;
    }
    .cart-section, .add-section {
      margin-bottom: 20px;
    }
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>我的购物车</h2>
    <div class="cart-section">
      <ul>
        <!-- 遍历购物车中的每个商品 -->
        <li v-for="(item, index) in cart" :key="index">
          {{ item.name }} - 单价：￥{{ item.price }} - 数量：
          <!-- 数量输入框，使用 v-model 双向绑定 -->
          <input type="number" v-model.number="item.quantity" min="1">
          <button @click="removeItem(index)">删除</button>
        </li>
      </ul>
      <p>总价：￥{{ totalPrice }}</p>
    </div>

    <h3>添加新商品</h3>
    <div class="add-section">
      名称：<input v-model="newItemName" placeholder="商品名称"><br />
      单价：<input v-model.number="newItemPrice" placeholder="商品单价" type="number" min="0"><br />
      数量：<input v-model.number="newItemQuantity" placeholder="数量" type="number" min="1"><br />
      <button @click="addItem">添加到购物车</button>
    </div>
  </div>

  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        // 购物车中初始存在的商品
        cart: [
          { name: '笔记本电脑', price: 5000, quantity: 1 },
          { name: '手机', price: 3000, quantity: 2 }
        ],
        // 用于添加新商品的输入数据
        newItemName: '',
        newItemPrice: 0,
        newItemQuantity: 1
      },
      computed: {
        // 自动计算购物车中所有商品的总价
        totalPrice: function() {
          return this.cart.reduce(function(sum, item) {
            return sum + item.price * item.quantity;
          }, 0);
        }
      },
      methods: {
        // 添加新商品到购物车
        addItem: function() {
          // 如果商品名称为空或单价、数量不合理，则提醒用户
          if (this.newItemName === '' || this.newItemPrice <= 0 || this.newItemQuantity <= 0) {
            alert('请填写正确的商品信息！');
            return;
          }
          // 将新商品添加到购物车
          this.cart.push({
            name: this.newItemName,
            price: this.newItemPrice,
            quantity: this.newItemQuantity
          });
          // 清空输入框，准备下一次添加
          this.newItemName = '';
          this.newItemPrice = 0;
          this.newItemQuantity = 1;
        },
        // 根据索引删除购物车中的商品
        removeItem: function(index) {
          this.cart.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>
